<!--
 * @Author: ChenDong 1516216399@qq.com
 * @Date: 2024-07-03 15:09:08
 * @LastEditors: ChenDong 1516216399@qq.com
 * @LastEditTime: 2024-07-04 14:23:03
 * @FilePath: \武汉实习\elementplus\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 导入Elementplus Css样式 -->
  <link rel="stylesheet" href="../../css/element-plus.css">
  <style>
    .el-aside {
      height: 90vh;
    }
    .el-col-12{
      max-width: 100%;
      flex:1 0 50%;
    }
  </style>
</head>
<div id="app">
  <div class="main">
    <!-- 面包屑 breadcrumb -->
    =       <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">后台数据</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">游戏收益</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="24" >
          <el-card>
            <div id="chart1"  style="width: 100%;height: 300px;">

            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="tit"><h3>游戏收益统计</h3></div>
    <div id="global_hn_statistic" class="tab">
      <table style="border-collapse: collapse; width: 100%;">
        <thead>
        <tr style="background-color: #f2f2f2;">
          <th style="padding: 8px; text-align: left;">游戏类型</th>
          <th style="padding: 8px; text-align: left;">总体收益</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td style="padding: 8px; text-align: left;">国战游戏</td>
          <td style="padding: 8px; text-align: left;">132922522.56</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">收藏卡牌游戏</td>
          <td style="padding: 8px; text-align: left;">34271397.99</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">格斗游戏</td>
          <td style="padding: 8px; text-align: left;">20170322.19</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">第一人称射击游戏</td>
          <td style="padding: 8px; text-align: left;">228333624.81</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">多人在线竞技游戏</td>
          <td style="padding: 8px; text-align: left;">354299247.5</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">益智游戏</td>
          <td style="padding: 8px; text-align: left;">39082.97</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">竞速游戏</td>
          <td style="padding: 8px; text-align: left;">7753329.29</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">角色扮演游戏</td>
          <td style="padding: 8px; text-align: left;">5968597.31</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">运动类游戏</td>
          <td style="padding: 8px; text-align: left;">26182617.56</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">策略游戏</td>
          <td style="padding: 8px; text-align: left;">64507955.97</td>

        </tr>
        <tr>
          <td style="padding: 8px; text-align: left;">第三人称射击游戏</td>
          <td style="padding: 8px; text-align: left;">4901986.38</td>

        </tr>
        </tbody>
      </table>
    </div>



  </div>
</div>

<body>
<!-- 导入vue框架 -->
<script src="../../js/v3.2.8/vue.global.prod.js"></script>
<!-- 导入ElementPlus框架 -->
<script src="../../js/element-plus.js"></script>
<!-- 导入Elementplus Icon  -->
<script src="../../js/element-icons.js"></script>
<script src="../../js/echarts.min.js"></script>
<script>
  // createApp()接受一个{}参数，用来创建一个vue应用
  // reactive 专门用于创建对象{}、数组[]类型的响应式数据
  // ref 用来创建Number bool string,基础数据类型

  document.addEventListener("DOMContentLoaded",function (){

    const chart1Dom = document.querySelector("#chart1")


          fetch("http://localhost:8080/webchatsai_war_exploded/echarts")
            .then(response =>response.json())
            .then(data=>{
              const chart1Option = {
                dataset: [
                  {
                    dimensions: ['date', 'total',],
                    source: data.source
                  },
                  {
                    transform: {
                      type: 'sort',
                      config: { dimension: 'total', order: 'desc' }
                    }
                  }
                ],
                xAxis: {
                  type: 'category',
                  axisLabel: { interval: 0, rotate: 0}
                },
                yAxis: {},
                series: {
                  type: 'bar',
                  encode: { x: 'date', y: 'total' },
                  datasetIndex: 1
                }
              }

              initEcharts(chart1Dom,chart1Option);
            })
            .catch(error=>{
              console.log(error)
            })



  })
  function initEcharts(dom,option){
    //初始化echarts 实例
    const domEcharts = echarts.init(dom);
    //设置echarts配置
    domEcharts.setOption(option);
  }




  const {
    createApp,
    reactive,
    ref
  } = Vue;
  // const msg1 = "字符串类型";
  // const msg = ref("字符串类型")


  const app = createApp({
    setup() {


      // 返回模板中需要的响应式引用
      return {
        //msg
        tableData,
        dialogFormVisible,
        form
      };
    }

  });
  // 应用使用element plus 组件
  app.use(ElementPlus);
  // "location" 参数对应<location>
  app.component("location" , ElementPlusIconsVue.Location)
  app.component("document" , ElementPlusIconsVue.Document)
  app.component("icon-menu" , ElementPlusIconsVue.Menu)
  app.component("setting" , ElementPlusIconsVue.Setting)

  //将应用挂载到 #app
  app.mount('#app');
</script>

</body>

</html>